import _ from 'lodash'
import { HufuEcharts } from '@/components'
import styles from './index.less'

// 颜色16进制换算rgba,添加透明度,用于绘制双环饼图的半透明内圈
const hexToRgba = (hex, opacity) => (
  `rgba(${parseInt(`0x${hex.slice(1, 3)}`, 16)
  },${parseInt(`0x${hex.slice(3, 5)}`, 16)
  },${parseInt(`0x${hex.slice(5, 7)}`, 16)
  },${opacity
  })`
)

const PieCard = (props) => {
  const {
    titleStr, numStr, data, ...other
  } = props

  const initPieChartOptFun = (opt) => {
    // const color = ['#318AFF', '#08D3C5', '#7C80FF', '#FF426E']
    const color1 = [{
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: '#318AFF' }, { offset: 1, color: '#50A9FD' }],
    }, {
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: '#2ECA91' }, { offset: 1, color: '#08D3C5' }],
    }, {
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: '#6E50FF' }, { offset: 1, color: '#7C80FF' }],
    }, {
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: '#FF426E' }, { offset: 1, color: '#FF7857' }],
    },
    {
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: '#FA9361' }, { offset: 1, color: '#fad661' }],
    },
    {
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: '#D5DEE7' }, { offset: 1, color: '#E8EBF2' }],
    },
    ]
    const color2 = [{
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: hexToRgba('#318AFF', 0.2) }, { offset: 1, color: hexToRgba('#50A9FD', 0.2) }],
    }, {
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: hexToRgba('#2ECA91', 0.2) }, { offset: 1, color: hexToRgba('#08D3C5', 0.2) }],
    }, {
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: hexToRgba('#6E50FF', 0.2) }, { offset: 1, color: hexToRgba('#7C80FF', 0.2) }],
    }, {
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: hexToRgba('#FF426E', 0.2) }, { offset: 1, color: hexToRgba('#FF7857', 0.2) }],
    },
    {
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: hexToRgba('#FA9361', 0.2) }, { offset: 1, color: hexToRgba('#fad661', 0.2) }],
    },
    {
      type: 'linear',
      x: 0.5,
      y: 0,
      x2: 0.5,
      y2: 1,
      colorStops: [{ offset: 0, color: hexToRgba('#D5DEE7', 0.2) }, { offset: 1, color: hexToRgba('#E8EBF2', 0.2) }],
    },
    ]
    const radius = ['75%', '100%']
    let total = 0
    data.map((item) => {
      total += item.value
    })
    // color.forEach((item) => {
    //   color1.push(item)
    //   color2.push(hexToRgba(item, 0.2))
    // })
    const radius2 = [`${Number(radius[0].split('%')[0]) + 1}%`, `${Number(radius[0].split('%')[0]) - 15}%`]
    const optionsObj = {
      legend: {
        left: 'right',
        top: 'center',
        orient: 'vertical',
        icon: 'rect',
        type: 'plain',
        itemWidth: 10,
        itemHeight: 10,
        align: 'left',
        selectedMode: false,
        formatter(name) {
          let result
          data.forEach((item) => {
            if (item.name === name) {
              result = `{a|${name}}{b| ${item.value}}`
            }
          })
          return result
        },
        textStyle: {
          backgroundColor: 'rgba(0, 0, 0, 0)',
          // width: 110,
          rich: {
            a: {
              color: ' rgba(0,0,0,0.85)',
            },
            b: {
              color: ' rgba(0,0,0,0.9)',
            },
            c: {
              color: ' rgba(0,0,0,0.45)',
            },
          },
        },
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          top: 'center',
          left: '15%',
          width: '75%',
          height: '75%',
          radius,
          center: ['15%', '50%'],
          avoidLabelOverlap: false,
          selectedMode: false,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
            color: (params) => color1[params.dataIndex],
          },
          legendHoverLink: false,
          silent: true,
          label: {
            show: true,
            position: 'center',
            formatter: [`{a|${total}}`, '{b|总数}'].join('\n'),
            rich: {
              a: {
                color: ' rgba(0,0,0,1)',
                lineHeight: 24,
                fontSize: 20,
                fontWeight: 'bold',
              },
              b: {
                color: ' rgba(0,0,0,0.85)',
                lineHeight: 20,
                fontSize: 12,
              },
            },
          },
          labelLine: {
            show: false,
          },
          data,
        },
        {
          type: 'pie',
          top: 'center',
          left: '15%',
          width: '75%',
          height: '75%',
          center: ['15%', '50%'],
          radius: radius2,
          hoverAnimation: false,
          startAngle: 90,
          selectedMode: 'single',
          selectedOffset: 0,
          silent: true,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
            color: (params) => color2[params.dataIndex],
          },
          label: {
            show: false,
            formatter: '{b}' + ' ' + '{c}',
          },
          data,
          z: 666,
        },
      ],
    }
    // 用opt中的一些属性覆盖默认的，方便外部做一些参数的覆盖
    let returnObj = optionsObj
    if (opt) {
      returnObj = _.merge({}, optionsObj, opt)
    }
    return returnObj
  }

  return (
    <div className={styles.pie_box}>
      <HufuEcharts
        options={initPieChartOptFun()}
      />
    </div>
  )
}

export default PieCard
